<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>函数式组件</title>
	</head>
	<body>
		<!--准备好一个容器-->
		<div id="test"></div>

		<!--引入React核心库-->
		<script src="../js/react.development.js"></script>
		<!--引入React-DOM  用于支持React操作ROM-->
		<script src="../js/react-dom.development.js"></script>
		<!--引入babel  将jsx转为js-->
		<script src="../js/babel.min.js"></script>
		<script type="text/babel">
			/*此处 type一定是babel*/
			// 1.创建函数式组件
			function MyComponent() {
				console.log(this); //此处的this是undefined,因为babel编译后开启了严格模式
				return <h2>我是用函数定义的组件(使用于[简单组件]的定义)</h2>;
			}
			// 2.渲染虚拟DOM到页面
			ReactDOM.render(<MyComponent />, document.getElementById("test"));
			/*
                执行了ReactDOM.render(<MyComponent/>)......之后,发生了什么?
                1.React解析组件标签，找到了MyComponent组件。
                2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
            */
		</script>
	</body>
</html>
